<template>
  <s-layout :bgStyle="{ color: '#FFF' }" title="">
    <view class="questions">
      <view class="question-item" v-for="(item, index) in options" :key="index">
        <view class="title">{{ item.tip }}</view>

        <view class="options">
          <view
            class="option-item"
            @tap="onTap(v, item.key, item.multiply)"
            v-for="v in item.options"
            :key="v.image"
          >
            <image
              :src="v.female"
              mode="widthFix"
              class="image"
              :class="{
                selected: item.multiply
                  ? form[item.key].includes(v.label)
                  : form[item.key] === v.label,
              }"
            />

            <view class="tip">{{ v.label }}</view>

            <view
              class="circle-checkbox"
              :style="{
                background: (
                  item.multiply ? form[item.key].includes(v.label) : form[item.key] === v.label
                )
                  ? 'rgba(0, 0, 0, 0.8)'
                  : 'rgba(0, 0, 0, 0.3)',
              }"
            >
              <view
                class="checkmark"
                v-show="
                  item.multiply ? form[item.key].includes(v.label) : form[item.key] === v.label
                "
              >
                <image
                  src="https://oss.yz.zglvling.com/user/image/2025-07-23/1753234211808517.png"
                  mode="aspectFill"
                  class="img-1"
                />
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="btn-bottom">
        <button class="next-btn" @tap="nextStep"> 下一步 </button>

        <!-- <uni-file-picker
          v-if="isHideUploadBtn"
          :auto-upload="false"
          :del-icon="false"
          :disable-preview="true"
          sizeType="['original']"
          class="custom-upload"
          :sourceType="['album', 'camera']"
          limit="1"
          mode="grid"
          @select="selectPic"
        /> -->
      </view>

      <div class="dialog" v-if="false">
        <div class="dialog-main">
          <div class="next-input">
            <uni-file-picker
              :auto-upload="false"
              :del-icon="false"
              :disable-preview="true"
              sizeType="['original']"
              class="upload"
              limit="1"
              mode="grid"
              >选择选择选择选择选择选择选择选择
            </uni-file-picker>
          </div>
        </div>
      </div>
    </view>
  </s-layout>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import { getAccessToken } from '@/sheep/request';
  import { getUserInfo, saveUserInfo } from '@/sheep/api/user';
  import sheep from '@/sheep';

  // const token = getAccessToken();

  const pngUrl = ref('https://llshop.zglvling.com/shop/img/png/');

  const options = ref([
    {
      tip: '您喜欢哪一种配色？',
      key: 'color',
      options: [
        {
          label: '鲜亮明媚',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754271277238202.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287516248040.png',
        },
        {
          label: '柔雅清浅',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272479729897.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287559655454.png',
        },
        {
          label: '暖郁厚重',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272516442235.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287643231837.png',
        },
        {
          label: '冷峻高纯',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272584763306.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287666308662.png',
        },
      ],
    },
    {
      tip: '您更喜欢以下哪种量感类型的服装？',
      key: 'total_sense_of_quantity_t',
      options: [
        {
          label: '大量感',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272634205753.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287774865899.png',
        },
        {
          label: '中量感',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272667530388.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287797613307.png',
        },
        {
          label: '小量感',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272732987598.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287823232319.png',
        },
      ],
    },

    // {
    //   tip: '您更喜欢以下哪种轮廓类型的服装？',
    //   options: [
    //     {
    //       label: '成熟大气款',
    //       female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287774865899.png',
    //       male: pngUrl + 'choose/lg1.png',
    //     },
    //     {
    //       label: '适中',
    //       female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287797613307.png',
    //       male: pngUrl + 'choose/lg2.png',
    //     },
    //     {
    //       label: '轻盈活力款',
    //       female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287823232319.png',
    //       male: pngUrl + 'choose/lg3.png',
    //     },
    //   ],
    // },

    {
      tip: '您更喜欢以下哪种轮廓类型的服装？',
      key: 'straight_total_score_t',
      options: [
        {
          label: '轮廓偏曲',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272769798751.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287860949325.png',
        },
        {
          label: '轮廓适中',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272798749257.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287885715958.png',
        },
        {
          label: '轮廓偏直',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272825106455.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287910169893.png',
        },
      ],
    },

    {
      tip: '您更喜欢哪种设计类型的服装？',
      key: 'dynamic_static_t',
      options: [
        {
          label: '静态型',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272863674867.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287959334463.png',
        },
        {
          label: '动态型',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272895680965.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287984354873.png',
        },
      ],
    },

    {
      tip: '您的体型更接近以下哪种类型？',
      key: 'somatotype',
      options: [
        {
          label: '苹果型(O型)',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272949584763.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288018865805.png',
        },

        {
          label: '梨型(A型)',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272971243794.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288043986200.png',
        },
        {
          label: '沙漏型(X型)',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272999372681.png',
          male: '',
        },
        {
          label: '倒三角形(T型)',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754273036691620.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288079451868.png',
        },
        {
          label: '矩形(H型)',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754273059748866.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288102506314.png',
        },
      ],
    },

    {
      tip: '存在的局部问题：（多选）',
      key: 'question',
      multiply: true,
      options: [
        {
          label: '溜肩',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754273120704234.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288139214507.png',
        },
        {
          label: '肩厚',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754284852257793.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288167419171.png',
        },

        {
          label: '胸下移',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754284911394592.png',
          male: '',
        },
        {
          label: '腰部较粗',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754284957668185.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288192594927.png',
        },
        {
          label: '小腹隆起',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754284994915538.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288225157426.png',
        },
        {
          label: '胯部宽',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754285222281946.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288247671595.png',
        },
        {
          label: '臀部下垂',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754285259781905.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288268495259.png',
        },
        {
          label: '腿型不直',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754285643650291.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288294345526.png',
        },
        {
          label: '大腿粗',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754301665703278.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288325253267.png',
        },
        {
          label: '小腿粗',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754301720856355.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288345234792.png',
        },
        {
          label: '五五分身',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754301753426645.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288366916893.png',
        },
      ],
    },

    {
      tip: '您希望服装对身材修饰的哪些方面？（多选）',
      key: 'purpose',
      multiply: true,
      options: [
        {
          label: '显高',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754286910889889.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288419625082.png',
        },

        {
          label: '显瘦',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754286945232084.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288448946805.png',
        },
        {
          label: '勾勒腰线',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754286977631074.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288482351499.png',
        },
        {
          label: '隐藏肚腩',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287016166568.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288506708844.png',
        },
        {
          label: '修饰腿型',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287045333748.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288535402561.png',
        },
        {
          label: '修饰假胯宽',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287075453655.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288558374677.png',
        },
        {
          label: '显肩宽',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287105997760.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288586903302.png',
        },
        {
          label: '显肩窄',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287129635192.png',
          male: '',
        },
      ],
    },

    {
      tip: '选择需要的着装需求场合：（多选）',
      key: 'occasion_dressing',
      multiply: true,
      options: [
        {
          label: '日常休闲',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287171556149.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288612659658.png',
        },
        {
          label: '商务职场',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287204873496.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288635160572.png',
        },
        {
          label: '隆重社交',
          female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287241722206.png',
          male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288657643527.png',
        },
      ],
    },
  ]);

  //   const form = ref({
  //     color: '',
  //     feeling_of_quantity: 轻盈活力款,
  // right_and_wrong: 突显女人味,
  // dynamic_and_static: 简约经典,
  // somatotype: 梨型(A型),
  // question: 肩厚,胸下移,腰部较粗,
  // purpose: 显瘦,勾勒腰线,隐藏肚腩,
  // occasion_dressing: 商务职场,隆重社交
  //   })

  const form = ref({
    color: '',
    total_sense_of_quantity_t: '',
    straight_total_score_t: '',
    dynamic_static_t: '',
    somatotype: '',
    question: [],
    purpose: [],
    occasion_dressing: [],
  });

  const onTap = (item, key, multiply) => {
    console.log('key: -----', key);
    console.log('item.label: -----', item.label);

    console.log('multiply: -----', multiply);

    if (multiply) {
      if (!form.value[key]) {
        form.value[key] = [];
      }

      form.value[key] = form.value[key].includes(item.label)
        ? form.value[key].filter((i) => i !== item.label)
        : [...form.value[key], item.label];

      console.log('form.value[key]: ', form.value[key]);

      return;
    } else {
      form.value[key] = form.value[key] === item.label ? '' : item.label;
    }
  };

  // getUserInfo()

  const isHideUploadBtn = computed(() => {
    if (!form.value.color) {
      return false;
    }

    if (!form.value.total_sense_of_quantity_t) {
      return false;
    }

    if (!form.value.straight_total_score_t) {
      return false;
    }

    if (!form.value.dynamic_static_t) {
      return false;
    }

    if (!form.value.somatotype) {
      return false;
    }

    if (!form.value.question.length) {
      return false;
    }

    if (!form.value.purpose.length) {
      return false;
    }

    if (!form.value.occasion_dressing.length) {
      return false;
    }

    return true;
  });

  const selectPic = async (e) => {
    console.log('selectPic: ', e.tempFilePaths[0]);

    uni.showLoading({
      icon: 'loading',
      title: '',
    });

    const userInfo = await getUserInfo();

    console.log('userInfo: -----------', userInfo);

    console.log('form.value: ', form.value);

    await saveUserInfo({
      ...JSON.parse(userInfo.data.dataJson),
      ...form.value,
      question: form.value.question.toString(),
      purpose: form.value.purpose.toString(),
      occasion_dressing: form.value.occasion_dressing.toString(),
    }).then(() => {
      uni.showLoading({
        icon: 'loading',
        title: '',
      });

      uni.uploadFile({
        url: 'https://puton.huimeimeta.com/app-api/cloth/uploadFace',
        filePath: e.tempFilePaths[0],
        name: 'file',
        formData: {},
        header: {
          Authorization: getAccessToken(),
        },
        success: (res) => {
          console.log('上传成功', typeof res.data);
          console.log('res.data.code: ', JSON.parse(res.data));

          if (JSON.parse(res.data).code === 200) {
            window.location.href = `https://face-canvas.huimeimeta.com/?img=${
              JSON.parse(res.data).result.fileUrl
            }&token=${getAccessToken()}`;
          }

          uni.hideLoading();
        },

        complete: () => {
          uni.hideLoading();
        },
      });
    });
  };

  const nextStep = async () => {
    if (!form.value.color) {
      uni.showToast({
        title: '请选择配色',
        icon: 'none',
      });
      return;
    }

    if (!form.value.total_sense_of_quantity_t) {
      uni.showToast({
        title: '请选择量感类型服饰',
        icon: 'none',
      });
      return;
    }

    if (!form.value.straight_total_score_t) {
      uni.showToast({
        title: '请选择轮廓类型服饰',
        icon: 'none',
      });
      return;
    }

    if (!form.value.dynamic_static_t) {
      uni.showToast({
        title: '请选择设计类型服饰',
        icon: 'none',
      });
      return;
    }

    if (!form.value.somatotype) {
      uni.showToast({
        title: '请选择您的体型',
        icon: 'none',
      });
      return;
    }

    if (!form.value.question.length) {
      uni.showToast({
        title: '请选择存在的局部问题',
        icon: 'none',
      });
      return;
    }

    if (!form.value.purpose.length) {
      uni.showToast({
        title: '请选择修饰哪些方面',
        icon: 'none',
      });
      return;
    }

    if (!form.value.occasion_dressing.length) {
      uni.showToast({
        title: '请选择着装需求场合',
        icon: 'none',
      });
      return;
    }

    uni.setStorageSync('formData', form.value);
    sheep.$router.go(`/pages/takePhoto/index?token=${getAccessToken()}`);
  };
</script>

<style lang="scss" scoped>
  .questions {
    padding-bottom: 150rpx;
    .question-item {
      padding: 30rpx;

      .title {
        font-size: 32rpx;
        line-height: 32rpx;
        font-weight: 600;
        padding: 20rpx 0rpx;
        color: rgba(3, 28, 36, 1);
      }

      .options {
        display: flex;
        // flex-wrap: nowrap;
        flex-wrap: wrap;

        .option-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0 4rpx;
          position: relative;

          .image {
            width: 160rpx;
            height: 220rpx;
            background: #eee;
            border: 2rpx solid #eee;
            box-sizing: border-box;
          }

          .selected {
            border: 0.5px solid rgba(3, 28, 36, 1);
          }

          .tip {
            margin-top: 20rpx;
            font-size: 28rpx;
            color: #22313f;
            margin-bottom: 40rpx;
            text-align: left;
          }

          .circle-checkbox {
            position: absolute;
            top: 12rpx;
            right: 12rpx;
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            border: 2rpx solid rgba(255, 255, 255, 1);
            background: rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;

            .checkmark {
              color: #fff; /* ✔ 白色 */
              background: rgba(0, 0, 0, 0.3);
              font-size: 24rpx;
              font-weight: bold;

              .img-1 {
                width: 10.76px;
                height: 6.59px;
                margin-bottom: 2px;
              }
            }
          }
        }
      }
    }

    .btn-bottom {
      margin-top: 40rpx;
      padding: 20rpx 40rpx;
      position: relative;

      .next-btn {
        height: 80rpx;
        border-radius: 16rpx;
        background-color: #0d232c;
        color: white;
        font-size: 32rpx;
      }

      .custom-upload {
        // background-color: red;
        position: absolute;
        inset: 0;
        opacity: 0;
        :deep(.file-picker__box) {
          width: 100% !important;
        }
      }
    }

    .dialog {
      position: fixed;
      inset: 0;
      z-index: 100;
      background-color: rgba(0, 0, 0, 0.4);

      display: flex;
      align-items: center;
      justify-content: center;

      .dialog-main {
        height: 80rpx;
        border-radius: 16rpx;
        background-color: #0d232c;
        color: white;
        font-size: 32rpx;
        .next-input {
          height: 80rpx;
          width: 200rpx;
          border-radius: 16rpx;
          background-color: #0d232c;
          color: white;
          font-size: 32rpx;
          position: relative;

          :deep(.file-picker__box-content) {
            background-color: pink;
            width: 100%;
            height: 100%;
            position: absolute;
            inset: 0;
            padding: 300rpx;
            z-index: 200;
            opacity: 0;
          }

          // position: relative;

          &:after {
            content: '点击上传头像';
            position: absolute;
            left: 50%;
            top: 50%;
            color: white;
            font-size: 28rpx;
            transform: translate(-50%, -50%);
            font-weight: bolder;
            z-index: 100;
          }
        }
      }
    }
  }
</style>
